<template>
  <div class="page">
    <!--搜索-->
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="formInline.user"
                  placeholder="角色名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="onSearch">查询</el-button>
        <el-button type="success"
                   @click="dialogAddUserFormVisible=true">添加</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column type="selection"
                       width="55">

      </el-table-column>
      <el-table-column prop="RoleName"
                       label="角色名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="RoleDesc"
                       label="备注"
                       width="180">
      </el-table-column>
      <el-table-column prop="PermissionList"
                       label="权限列表"
                       width="280">
      </el-table-column>
      <el-table-column prop="UserList"
                       label="关联用户"
                       width="180">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="warning"
                     @click="handleSetPermission(scope.$index, scope.row)">设置权限</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加模态-->
    <el-dialog title="配置权限"
               :visible.sync="dialogPermissionVisible">
      <div class="roletitle">
        当前角色名称:<h4 style="display: contents;">{{dialogPermissionName}}</h4>
        <span class="perms_config_desc">可以设置角色权限到具体的操作按钮</span>
      </div>
      <el-tree ref="permissionTree"
               :data="data"
               show-checkbox
               node-key="MenuId"
               default-expand-all
               :props="defaultProps">
      </el-tree>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogPermissionVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $http from '../../request/http'

export default {
  data() {
    return {
      formInline: {
        user: '',
      },
      tableData: [],
      dialogPermissionVisible: false,
      data: [], //模态数据
      defaultProps: {
        id: 'MenuId',
        children: 'ChildMenus',
        label: 'MenuName',
      },
      dialogPermissionName: '', //模态名称
      checkedKeys: [], //选中数据
      checkedKyesHalf: [], //父级半选中节点
      roleId: '', //角色ID
    }
  },
  components: {},
  methods: {
    //设置权限
    handleSetPermission(index, row) {
      this.roleId = row.RoleId
      this.dialogPermissionVisible = true
      this.dialogPermissionName = row.RoleName
      //清空数组
      this.checkedKeys = []
      

      //设置对应权限
      $http.get(`Role/permissionlist/${row.RoleId}`).then((res) => {
          //清空Tree
      this.$refs.permissionTree.setCheckedKeys([]);
          //循环结果
        res.data.PageData.forEach((i) => {
            //获取当前node
          var node = this.$refs.permissionTree.getNode(i.MenuId)
          //console.log(node.isLeaf)
          //是否为叶子节点
          if (node.isLeaf) {
            this.$refs.permissionTree.setChecked(node, true)
          }
        })

        // res.data.PageData.filter(item => {
        //   this.checkedKeys.push(item.MenuId)
        // })
        // this.$refs.permissionTree.setCheckedKeys(this.checkedKeys)

        // console.log(this.checkedKeys);
      })

      console.log(index, row)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },

    //首页列表
    handleGetList() {
      $http.get('Role/rolelist').then((res) => {
        this.tableData = res.data.Data
      })
    },
    //加载模态 角色
    async getPermissionList() {
      let userid = localStorage.getItem('userid')
      await $http.get(`Menu/menutree/${userid}`).then((res) => {
        this.data = res.data.Data
      })
    },
    //查询
    onSearch() {},
    //添加用户
    onSubmit() {
      //关闭模态
      this.dialogPermissionVisible = false
      //获取所有选中的key(不包含父节点) 父节点为半选中状态
      this.checkedKeys = this.$refs.permissionTree.getCheckedKeys()
      //获取半中状态
      this.checkedKyesHalf = this.$refs.permissionTree.getHalfCheckedKeys()
      //添加角色中的权限
      $http
        .post(`Role/addrolepermission`, {
          RoleId: this.roleId,
          MenuIds: this.checkedKeys.concat(this.checkedKyesHalf).toString(), //将关选中节点和子节点组合在一起
        })
        .then((res) => {
          if (res.data.Code > 0) {
            this.$message.success('配置权限成功')
            this.handleGetList()
          } else {
            this.$message.error('配置权限失败')
          }
        })
    },
  },
  created: function () {
    this.handleGetList()
    this.getPermissionList()
  },
}
</script>

<style scoped>
.page {
  padding-top: 10px;
}
.roletitle {
  margin-bottom: 15px;
}
.perms_config_desc {
  color: #97aac1;
  font-size: 12px;
  padding-left: 6px;
}
</style>
